<template>
  <div class="playListContainer">
    <!-- 播放列表 -->
    <el-drawer v-model="playlist.showDrawer" :with-header="false">
      <span style="display: block; margin-bottom: 20px">播放列表</span>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1" @click="handleToggle('1')"
          >播放列表</el-menu-item
        >
        <el-menu-item index="2" @click="handleToggle('2')"
          >收藏列表</el-menu-item
        >
        <el-menu-item index="3" @click="handleToggle('3')"
          >歌单/榜单列表</el-menu-item
        >
      </el-menu>
      <!-- 歌曲列表 -->
      <div class="songListContainer">
        <!-- 歌单歌曲列表 -->
        <ul
          v-for="list in allPlaylist"
          :key="list.id"
          v-show="list.activeIndex === activeIndex"
        >
          <el-row>
            <el-button type="primary" round @click="playCurrentList(list.name)">
              <el-icon>
                <VideoPlay />
              </el-icon>
              <span>播放当前列表</span>
            </el-button>
            <el-button
              type="primary"
              class="copy"
              round
              @click="copyList($event)"
              v-show="list.activeIndex === '2'"
            >
              <el-icon>
                <Printer />
              </el-icon>
              <span>导出列表</span>
            </el-button>
            <el-button
              type="primary"
              round
              @click="importDialogVisible = true"
              v-show="list.activeIndex === '2'"
            >
              <el-icon>
                <Edit />
              </el-icon>
              <span>导入列表</span>
            </el-button>
          </el-row>
          <li
            v-for="song in list.value"
            :key="song.id"
            class="pointer"
            @click.stop="playSong(song.id)"
            :class="{ liACtive: player.currentSongInfo.id === song.id }"
          >
            <div class="songInfo textEllipsis">
              <span>{{ song.name }}</span>
              <span> - </span>
              <span v-for="(singer, index) in song.singers" :key="singer.id">
                {{ singer.name }}
                <span v-if="index !== song.singers.length - 1">、</span>
              </span>
            </div>
            <!-- 已收藏 -->
            <Like
              v-show="faStore.favoriteStatus({ ...song })"
              theme="filled"
              size="20"
              fill="#f00"
              @click.stop="changedelDialogVisible(song)"
              class="iconfont pointer"
              title="收藏"
            />
            <!-- 未收藏 -->
            <Like
              v-show="!faStore.favoriteStatus({ ...song })"
              @click.stop="faStore.addFavorite({ ...song })"
              theme="outline"
              size="20"
              fill="#409EFF"
              class="iconfont pointer"
              title="收藏"
            />
            <CloseSmall
              v-show="list.name == '播放列表'"
              theme="outline"
              size="28"
              fill="#409EFF"
              class="iconfont"
              style="margin-left: 10px"
              title="从播放列表中移除"
              @click.stop="playlist.addSongToPlaylist(song, 'del')"
            />
          </li>
        </ul>
      </div>
    </el-drawer>
    <el-dialog v-model="delDialogVisible" title="警告" width="30%">
      <span>确定要移除吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleAddFavorite('cancel')">取消</el-button>
          <el-button type="primary" @click="handleAddFavorite('confirm')">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 导入列表 -->
    <el-dialog
      v-model="importDialogVisible"
      title="请输入配置"
      width="30%"
      draggable
    >
      <el-input
        v-model="listConfig"
        :rows="2"
        type="textarea"
        placeholder="请输入收藏列表配置信息"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleImport"> 导入 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script name="PlayList" setup>
import { reactive, ref } from 'vue';
import { Like, CloseSmall } from '@icon-park/vue-next';
import playlistStore from '@/stores/playlistStore';
import favoritesStore from '@/stores/favoritesStore';
import { usePlaySong } from '@/hooks/usePlaySong';
import playerStore from '@/stores/playerStore';
import { handleCopy } from '@/hooks/useCopy';
import { decrypt } from '@/utils/encipher';
import { ElMessage } from 'element-plus';

const playlist = playlistStore();
const faStore = favoritesStore();
const { playSong } = usePlaySong();
const player = playerStore();

const allPlaylist = reactive([
  {
    id: 0,
    name: '播放列表',
    value: playlist.playlist,
    activeIndex: '1',
  },
  {
    id: 1,
    name: '收藏列表',
    value: faStore.favoriteList,
    activeIndex: '2',
  },
  {
    id: 2,
    name: '歌单/榜单列表',
    value: playlist.songlistSongs,
    activeIndex: '3',
  },
]);

// 播放当前列表
function playCurrentList(name) {
  if (name === '播放列表') {
    // 判断列表中是否有歌曲，没有则直接返回
    if (playlist.playlist.length < 1) return;
    playlist.switchCurrentPlaylist(playlist.playlist);
    playSong(playlist.playlist[0].id);
    return;
  }
  if (name === '收藏列表') {
    if (faStore.favoriteList.length < 1) return;
    playlist.switchCurrentPlaylist(faStore.favoriteList);
    playSong(faStore.favoriteList[0].id);
    return;
  }
  if (name === '歌单/榜单列表') {
    if (playlist.songlistSongs.length < 1) return;
    playlist.switchCurrentPlaylist(playlist.songlistSongs);
    playSong(playlist.songlistSongs[0].id);
    return;
  }
}

// 提示框显示装填
let delDialogVisible = ref(false);
// 歌曲信息
let songInfo = null;

// 打开 / 关闭提示框
function changedelDialogVisible(song) {
  delDialogVisible.value = true;
  songInfo = song;
}

// 切换分类
let activeIndex = ref('1');
function handleToggle(index) {
  activeIndex.value = index;
}

// 添加收藏
function handleAddFavorite(type) {
  // 确认取消收藏
  if (type === 'confirm') {
    faStore.addFavorite(songInfo);
    delDialogVisible.value = false;
  }
  if (type === 'cancel') {
    delDialogVisible.value = false;
    return;
  }
}

// 复制收藏列表
function copyList(e) {
  if (faStore.favoriteList.length === 0) return;
  handleCopy(e, localStorage.getItem('favoriteList'));
}

// 导入列表
let importDialogVisible = ref(false);
let listConfig = ref(''); // 列表配置
function handleImport() {
  if (listConfig !== '') {
    let config = [];
    try {
      config = JSON.parse(decrypt(listConfig.value)); // 解密
    } catch (error) {
      ElMessage({
        type: 'warning',
        message: '导入失败！信息已存在或配置错误',
      });
      return;
    }
    faStore.initFavoriteList(config);
    ElMessage({
      type: 'success',
      message: '导入成功',
    });
    importDialogVisible.value = false;
  } else {
    ElMessage({
      type: 'warning',
      message: '请输入正确的配置信息！',
    });
  }
}
</script>

<style lang="scss" scoped>
// 歌曲列表
.songListContainer {
  width: 100%;
  height: 85%;
  margin: 0 auto;
  margin-top: 10px;

  ul {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 0;
    margin: 0;

    li {
      width: 100%;
      height: 35px;
      line-height: 35px;
      margin-top: 10px;
      text-indent: 10px;
      border-radius: 5px;
      color: $main-color;
      display: flex;
      align-items: center;

      &:first-child {
        margin-top: 0;
      }

      &:hover {
        background-color: $light-color;
      }

      .songInfo {
        width: 85%;
        height: 100%;
        margin-right: 3%;
      }
    }
  }
}

.liACtive {
  background-color: $light-color;
}
</style>
